<!DOCTYPE html>
<html>
<head>
	<title>注册页面v0.0.1</title>
</head>
<body>
	<style type="text/css">
		body{
			width: 720px;
			height: 540px;
			font-size: 13px;
		}
		input{
			background-color: whitesmoke;
		}
		meassage.import{
			color: red;
			font-size: 12px;
		}
		
		a:link{color:blue}
		a:visited{color:red}
		a:hover{color:mediumblue}
		a:active{color:pink}

		div.box{
			height: 390px;
			width: 620px;
			margin: 0px;
			border:1px solid lightblue;
		}
		div.title{
			height: 18px;
			color: blue;
			background-color: lightblue;
			margin: 3px;
		}
		div.input{
			height: 68px;
			border-bottom: 1px solid lightblue;
			margin:3px 3px 0px 3px;
		}
		div.input3{
			height: 78px;
			border-bottom: 1px solid lightblue;
			margin:3px 3px 0px 3px;
		}
		div.tip1{
			width: 120px;
			height: 65px;
			/*border:1px solid red;*/
			float: left;
		}
		div.tip2{
			width: 180px;
			height: 65px;
			/*border:1px solid red;*/
			float: left;
		}
		div.tip3{
			background-color: whitesmoke;
			width: 290px;
			height: 50px;
			float: right;
			font-size: 12px;
			padding: 8px;
		}
		div.tip4{
			background-color: whitesmoke;
			width: 290px;
			height: 32px;
			float: right;
			font-size: 12px;
			padding: 8px;
		}
		div.tip5{
			background-color: whitesmoke;
			width: 290px;
			height: 60px;
			float: right;
			font-size: 12px;
			padding: 8px;
		}
		.UserCenter{
			text-align: center;
			/*border:1px solid red;*/
			margin: 20px 0px 0px 0px;
		}
		.UserCenter1{
			text-align: center;
			/*border:1px solid red;*/
			margin: 15px 0px 0px 0px;
		}
		.UserCenter2{
			text-align: center;
			/*border:1px solid red;*/
			margin: 12px 0px 0px 0px;
		}
		.PasswordCenter{
			text-align: center;
			/*border:1px solid red;*/
			width: 120px;
			float: left;
			margin-top:3px;
		}
		.PasswordCenter1{
			text-align: center;
			/*border:1px solid red;*/
			width: 120px;
			float: left;
		}

		div.tip{
			width: 300px;
			height: 50px;
			/*border:1px solid red;*/
			float: left;
		}
		div.button{
			padding: 7px;
			text-align: center;
		}
		input.button{
			width: 100px;
			padding: 2px;
		}
	</style>
	<meassage class="import">请注意：带有“*”的项目必须填写.</meassage>
	<div class="box">
		<div class="title">
			<strong>请填写您的用户名：</strong>
		</div>

		<div class="input">
			<div class="tip1">
				<div class="UserCenter"><meassage class="import">*</meassage>通行证用户名：</div>
			</div>

			<div class="tip2">
				<div class="UserCenter"><input type="text" name="请输入用户名" placeholder="请输入用户名"></div>
				<a href="nowhere" target="_blank">查看用户名是否被占用</a>
			</div>

			<div class="tip3">
				用户名由<strong>a~z</strong>的英文字母（不区分大小写）、<strong>0~9</strong>的数字、<strong>点、减号</strong>或<strong>下划线</strong>组成，长度为<strong>3~18</strong>个字符，只能以数字或者字母开头和结尾，例如：kyzy_001.
			</div>
		</div>

		<div class="title">
			<strong>请填写安全设置：</strong>（安全设置用于验证账户和找回密码）
		</div>

		<div class="input">
			<div><meassage class="import">以下信息对保证您账号的安全极为重要，请您务必认真填写.</meassage></div>
			<div class="tip">
				<div class="PasswordCenter">
					<meassage class="import">*</meassage>输入登录密码：<br>
					<meassage class="import">*</meassage>登陆密码确认：
				</div>
				<div class="PasswordCenter1">
					<input type="password" name="请输入登录密码"><br>
					<input type="password" name="请输入登录密码确认">
				</div>
			</div>
			<div class="tip4">
				密码长度为<strong>6~16</strong>位，区分字母大小写. 登陆密码可以由字母、数字、特殊字符组成。【<a href="nowhere" target="_blank">更多说明</a>】
			</div>
		</div>

		<div class="input3">
			<div class="tip1">
				<div class="UserCenter1"><meassage class="import">*</meassage>密码提示问题：<br>
					<meassage class="import">*</meassage>密码提示答案：
				</div>
				<div class="UserCenter1"></div>
			</div>
			<div class="tip1">
				<div class="UserCenter2">
					<input type="text" name="密码提示问题："><br>
					<input type="text" name="密码提示答案：">
				</div>
			</div>
			<div class="tip5">
				当您忘记密码时可以由此找回密码. 例如，问题是“我的哥哥是谁？”，答案为“petter2”. 问题长度<strong>不大于36</strong>个字符，一个汉字占两个字符. 答案长度在<strong>6~30</strong>位之间，区分大小写. 【<a href="nowhere" target="_blank">更多说明</a>】
			</div>
		</div>
		<div class="input3">
			<div class="tip1">
				<div class="UserCenter1"><meassage class="import">*</meassage>输入安全码：<br>
					<meassage class="import">*</meassage>安全码确定：
				</div>
				<div class="UserCenter1"></div>
			</div>
			<div class="tip1">
				<div class="UserCenter2">
					<input type="text" name="输入安全码："><br>
					<input type="text" name="安全码确定：">
				</div>
			</div>
			<div class="tip5">
				安全码是您找回密码的重要途经，安全码长度为<strong>6~16</strong>位，区分字幕大小写，由字母、数字、特殊字符组成。 <message>特别提醒：安全码一旦设定，将不可自行修改</message> 【<a href="nowhere" target="_blank">更多说明</a>】
			</div>
		</div>
		<div class="button">
			<input type="submit" name="提交表单" class="button" value="提交表单">
		</div>
	</div>
</body>
</html>